import React, { Component } from 'react';
import { connect } from 'dva';
import { Form,Input,Button,message,TreeSelect,DatePicker,Modal } from 'antd';
import moment from 'moment';
import PTable from "../../../components/Pro/PTable";
import './less/medical.less';
import * as ajax from "../../../services/api";
import PartmentButton from "../../../components/PartmentButton";

const monthFormat = 'YYYY/MM';
const { RangePicker } = DatePicker;
const { confirm } = Modal;
const FormItem = Form.Item;

@connect(state => ({
  profile: state.profile,
}))

@Form.create()

/**
 * 缴费设置新增和修改
 */
export default class PayBasic extends Component {
  constructor(props,context){
    super(props,context);
    this.state = {
      loading:false,
      forceUpdate: false,
      mapData:[],
      treeData:[],
      userIdArrays:[],
      pageParm: {
        pageSize: "10",
        pageNumber: "1",
        paySchemeId: this.props.match.params.schemeId //传过来的方案id
      },
      checkNick: true,
      schemeId:this.props.match.params.schemeId,//传过来的方案id
      intercalate:true,//新增缴交比例的下方返回，添加人员按钮的显示
      mode:['month', 'month'],
      schemeDetail:[
        {
          socialInsType:'',//社保险种
          comPayProp:'',//公司缴交比例
          perPayProp:'',//个人缴交比例
          socialInsBase:'',//缴费基数
        }, {
          socialInsType:'',//社保险种
          comPayProp:'',//公司缴交比例
          perPayProp:'',//个人缴交比例
          socialInsBase:'',//缴费基数
        }, {
          socialInsType:'',//社保险种
          comPayProp:'',//公司缴交比例
          perPayProp:'',//个人缴交比例
          socialInsBase:'',//缴费基数
        }, {
          socialInsType:'',//社保险种
          comPayProp:'',//公司缴交比例
          perPayProp:'',//个人缴交比例
          socialInsBase:'',//缴费基数
        }, {
          socialInsType:'',//社保险种
          comPayProp:'',//公司缴交比例
          perPayProp:'',//个人缴交比例
          socialInsBase:'',//缴费基数
        },
      ],
      scheme:{
        schemeName:'',//方案名称
        startYears:'',//方案开始日期
        endYears:'',//方案结束日期
      },
      selectedRowKeys:[],//需要删除的信息key值集合
      selectedRowIds:[],//需要删除的信息id值集合
      visibleuser: false,//添加人员弹窗
    };
  }

  componentDidMount() {
    //获取部门数据Map列表
    ajax.getTreeperBydepartMap({}).then((data)=>{
      this.setState({mapData : data.data});
      // console.log('部门人员信息列表>>>>>>>>>>>>>>>>', data.data);
      // console.log('部门人员信息列表>>>>>>>>>>>>>>>>', data.data["1"]);
    });
     //获取部门树数据
     ajax.getTreeperBydepart({}).then((data)=>{
      this.setState({treeData : data.data});
      // console.log('部门信息', data.data);
    });
    this.getPaymentSet();//缴交方案详情查询，通过缴交方案ID
    this.getSelectPerson();//缴交方案的已选人员列表
  }

  cancelConfirm = () => {
    const that = this;
    confirm({
      title: '当前信息未保存，是否确认返回?',
      okText: '确认',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
          // console.log(">>>>>>>>>>>>>>>>",this.props);
          that.props.history.push('/PersonnelRecruitment/proportion');
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };

  getInitValue = (type, str) => {
    let retval = {};
    this.state.schemeDetail.map((val, i) => {
      if(type === val.socialInsType){
        retval = val;
      }
      return i;
    });
    // console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>',retval);
    return retval[str];
  };

  getPaymentSet = () => {
    if(this.state.schemeId !== '00'){
      ajax.getPaymentSettingById({paySchemeId:this.state.schemeId}).then((data) => {
        if(data.data){
          // console.log('缴交方案详情查询，通过缴交方案ID',data.data.SchemeDetail);
          this.setState({
            scheme:data.data.Scheme,
            schemeDetail:data.data.SchemeDetail,
          });
        }
      });
    }
  };

  //人员列表刷新的ajax请求
  getSelectPerson = () => {
    const pageParm = {...this.state.pageParm};
    this.setState({pageParm,forceUpdate:true}, () => {
      this.setState({forceUpdate: false});
    });
    // ajax.getSelectedPersonPage({
    //   pageSize:50,
    //   pageNumber:1,
    //   paySchemeId:this.state.schemeId
    // }).then((json) => {
    //   if(json.retType === '0'){
    //     console.log('缴交方案的已选人员列表',json.data.data);
    //     this.setState({
    //       listPage:json.data.data,
    //       total:json.data.total
    //     });
    //   }
    // });
  };



  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, val) => {
      const values = val; //转换为本地变量
      if (!err) {
        const rangeValue = values['rangeTimePicker'];
        values.startYears = rangeValue[0].format('YYYY-MM');
        values.endYears = rangeValue[1].format('YYYY-MM');
        console.log('startYears',values.startYears);
        console.log('endYears',values.endYears);
        delete values.rangeTimePicker;
        values.schemeDetailsList = [{},{},{},{},{}];
        values.schemeDetailsList[0] = {
          comPayProp: values.yanglao2 ,
          perPayProp: values.yanglao3 ,
          socialInsBase: values.yanglao1,
          socialInsType: "110"
        };
        values.schemeDetailsList[1] = {
          comPayProp: values.yiliao2 ,
          perPayProp: values.yiliao3 ,
          socialInsBase: values.yiliao1,
          socialInsType: "310"
        };
        values.schemeDetailsList[2] = {
          comPayProp: values.shiye2,
          perPayProp: values.shiye3,
          socialInsBase: values.shiye1,
          socialInsType: "210"
        };
        values.schemeDetailsList[3] = {
          comPayProp: values.gongzuo2,
          perPayProp: values.gongzuo3,
          socialInsBase: values.gongzuo1,
          socialInsType: "410"
        };
        values.schemeDetailsList[4] = {
          comPayProp: values.shengyu2,
          perPayProp: values.shengyu3,
          socialInsBase: values.shengyu1,
          socialInsType: "510"
        };
        values.schemeDetails = JSON.stringify(values.schemeDetailsList); //把数组转换为json方便后台保存
        //提交前去除多余的字段
        delete values.schemeDetailsList;
        delete values.yanglao1;
        delete values.yanglao2;
        delete values.yanglao3;
        delete values.yiliao1;
        delete values.yiliao2;
        delete values.yiliao3;
        delete values.shiye1;
        delete values.shiye2;
        delete values.shiye3;
        delete values.gongzuo1;
        delete values.gongzuo2;
        delete values.gongzuo3;
        delete values.shengyu1;
        delete values.shengyu2;
        delete values.shengyu3;
        console.log('提交的值集合',values);
        if(this.state.schemeId === '00'){ //就是新增的标记
          this.setState({ loading: true });
          ajax.paymentSettingSavePaymentSetting({...values}).then((json) => {
            // message.success('提交成功！');
            this.setState({
              visibleuser:true,
              schemeId:json.data,
              pageParm:{
                pageSize: "10",
                pageNumber: "1",
                paySchemeId: json.data,
              },
            }); //把返回的ID赋值缓存
            this.setState({ loading: false });
          },() => {
            this.setState({ loading: false });
            // message.warning(error);
          });
        }else{
          values.paySchemeId = this.state.schemeId;
          this.setState({ loading: true });
          ajax.paymentSettingSavePaymentSetting({...values}).then(() => {
            const that = this;
            confirm({
              title: "缴交设置保存成功！",
              okText: '确认',
              cancelText:'取消',
              onOk() {
                that.setState({ loading: false });
                that.props.history.push('/PersonnelRecruitment/proportion');
              },
              onCancel() {
                that.setState({ loading: false });
                console.log('Cancel');
              },
            });
          },() => {
            this.setState({ loading: false });
            // message.warning(error);
          });
        }
      }
    });
  };

  //时间选择
  handlePanelChange = (value, mode) => {
    this.setState({
      mode: [
        mode[0] === 'date' ? 'month' : mode[0],
        mode[1] === 'date' ? 'month' : mode[1],
      ],
    });
    console.log('mode',mode);
    console.log('value',value);
    const { form } = this.props;
    form.setFieldsValue({rangeTimePicker:value});
  };

  // 验证基数
  checkJiShu = (rule, value, callback) => {
    if (value && !(/^[1-9]\d{0,9}$|^[1-9]\d{0,9}\.{1}\d{1,2}$/g).test(value)) {
      callback('请输入9位整数，并且小数点后面最多输入2位！');
    } else {
      callback();
    }
  };
  checkJiShuMore = (rule, value, callback) => {
    if (value && value > 100) {
      callback('输入的数应小于或等于100！');
    }else if(value && !(/^[1-9]\d{0,2}$|^[1-9]\d{0,2}\.{1}\d{1,2}$/g).test(value)){
    // }else if(value && !(/^([1-9][0-9]*|0)\.([0-9]{2})$/).test(value)){
      callback('输入不正确,请保留两位小数！');
    } else {
      callback();
    }
  };

  // 批量删除
  handleDeleteList = () =>{
    const self = this;
    const keyNumber = this.state.selectedRowKeys.length;
    const keyId = this.state.selectedRowIds;
    if(keyNumber <= 0){
      message.warning('请选择需要移除的人员！');
    }else{
      // console.log(this.state.selectedRowIds);
      confirm({
        title: '共选择' + keyNumber + '名人员，被移除人员下月将不计算医社保缴交金额。是否确认移除！？',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          self.orderDelete(keyId);
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    }
  };

  // 删除
  orderDelete = (orderID) => {
    ajax.paymentSettingDelPerson({perIds:orderID,paySchemeId:this.state.schemeId}).then((data) => {
      // console.log("方案删除", data);
      this.setState({
        selectedRowIds:[],
        selectedRowKeys:[],
      });
      this.getSelectPerson();

    },(err) => {
      // console.log("方案删除失败", err);
      message.warning('方案删除失败！' + err);
    });
  };

  //选择完人员的回调方法
  callbackSavePersons = (checkedkeys) => {
      // console.log(checkedkeys, 'createpublish');
      ajax.paymentSettingAddPerson({//保存
        perIds:checkedkeys,
        paySchemeId : this.state.schemeId
      }).then((data) => {
        // console.log('保存人员成功' , data);
        // message.success(data.msg);
        this.setState({ visibleuser: false, checkedkeys }); //隐藏人员选择窗口
        this.getSelectPerson();//查询缴交方案的已选人员列表
      },(err) => {
        // console.log("保存人员成功", err);
        // message.warning('保存人员失败' + err);
        this.setState({ visibleuser: false, checkedkeys }); //隐藏人员选择窗口
        this.getSelectPerson();//查询缴交方案的已选人员列表
      });
  }


  // 表格渲染
  renderOrderList = () => {
    // const pageInitStudent = {//分页器
    //   defaultPageSize: 10,
    //   showQuickJumper: true,
    //   pageSizeOptions: ["5", "10", "15", "20", "25"],
    //   showSizeChanger: true,
    //   showTotal: () => { return '共 ' + this.state.total + ' 条数据'; }
    // };

    const selectedRowKey = this.state.selectedRowKeys;
    const rowSelection = { //行被选择的事件内容如下：
      selectedRowKeys:selectedRowKey,

      onChange: (selectedRowKeys) => {
        // console.log('selectedRowKeys',selectedRowKeys);

        this.setState({
          selectedRowKeys //key和value的值一样时，可以只写一个
        },()=>{
          // console.log('selectedRowKeys-more',this.state.selectedRowKeys);
        });
      },
      onSelect: (record, selected, selectedRows) => {
        const selectId = this.state.selectedRowIds;
        if(selected === true){
          selectId.push(record.perId);
        }else{
          for(let i = 0; i < selectId.length; i++) {
            if(selectId[i] === record.perId) {
              selectId.splice(i, 1);
              break;
            }
          }
        }
        this.setState({
          selectedRowIds: selectId
        });
        // console.log(`record:`,record.perId,`selected:`, selected,`selectedRows:`, selectedRows);
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        let selectId = [];
        if(selected === true){
          for(let i = 0; i < selectedRows.length; i++) {
            selectId.push(selectedRows[i].perId);
          }
        }else{
          selectId = [];
        }
        this.setState({
          selectedRowIds: selectId
        });
        // console.log(`selected:`,selected,`selectedRows:`,selectedRows,`changeRows:`, changeRows);
      },
    };

    const columns = [
      { title: '姓名', dataIndex: 'name', key: 'name' },
      { title: '身份证号', dataIndex: 'idCardNo', key: 'idCardNo' },
      { title: '手机号', dataIndex: 'contactPhone', key: 'contactPhone' }
    ];

    // const tmp = this.state.listPage.map((val, i) => { //为Table组件准备的行唯一标识
    //   const value = val;
    //   value.key = i + 1;
    //   return value;
    // });

    return (
      <PTable
        // dataSource={tmp}
        // pagination={pageInitStudent}
        style={{ marginTop:'16px' }}
        forceUpdate={this.state.forceUpdate}
        url="getSelectedPersonPage"
        columns={columns}
        pageParm={this.state.pageParm}
        showTotal
        rowSelection={rowSelection}
      />
    );

  };

  //弹窗关闭按钮
  handleMessageCancel = () => {
    this.setState({ visibleuser: false });
  }

  //弹窗保存按钮
  handleMessageOk = () => {
    //通过value区分部门的ID
    //通过value区分部门的ID
    const filterUserIdArrays = this.state.userIdArrays.filter((val) => {
      // console.log(val);
        if(this.state.mapData[val] === undefined){
          return false;
        }else{
          return true;
        }
    });
    this.callbackSavePersons(filterUserIdArrays);
    this.setState({ visibleuser: false });
  }
  //树选中事件
  treeSelectOnChangeHandler = (value,label,extra) =>{
    // console.log('选中的值',value,label,extra);
    this.setState({ userIdArrays:value });
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    const tProps = {
      treeData: this.state.treeData,
      value: this.state.userIdArrays,
      onChange: this.treeSelectOnChangeHandler,
      treeCheckable: true,
      // labelInValue:true,
      allowClear:true,
      treeNodeFilterProp:'label',
      showCheckedStrategy: TreeSelect.SHOW_CHILD,
      searchPlaceholder: '请选择',
      style: {
        width: 560,background:'#f5f5f5'
      },
    };

    return (
      <div className="pay-set">
        <Form onSubmit={this.handleSubmit} style={{ marginTop: 24 }} >
          <h2>缴交信息</h2>
          <FormItem label="方案名称" style={{marginTop: 24}} >
            {getFieldDecorator('schemeName', {
              initialValue:this.state.scheme.schemeName,
              rules: [{
                pattern: /^[\u4e00-\u9fa5A-Za-z0-9]{1,10}$/, message: '请输汉字最大10位!',
              },{
                required: true, message: '方案名称不能为空',
              }],
            })(
              <Input placeholder="请输入方案名称" maxLength="10" style={{width:'400px'}}/>
            )}
          </FormItem>

          {this.state.schemeId === '00' ? //三目表达式，新增
            <FormItem label="有效日期" >
              {getFieldDecorator('rangeTimePicker',{
                rules: [{ type: 'array', required: true, message: '有效日期不能为空' }],
              })(
                <RangePicker
                  placeholder={['开始月份', '结束月份']}
                  format="YYYY-MM"
                  mode={this.state.mode}
                  onPanelChange={this.handlePanelChange}
                  style={{width:'400px'}}
                />
              )}
            </FormItem> : //三目表达式，修改
            <FormItem label="有效日期" >
              {getFieldDecorator('rangeTimePicker',{
                initialValue:[moment(this.state.scheme.startYears, monthFormat), moment(this.state.scheme.endYears, monthFormat)],
                rules: [{ type: 'array', required: true, message: '有效日期不能为空' }],
              })(
                <RangePicker
                  placeholder={['开始月份', '结束月份']}
                  format="YYYY-MM"
                  mode={this.state.mode}
                  onPanelChange={this.handlePanelChange}
                  style={{width:'400px'}}
                />
              )}
            </FormItem>
          }
          <div className="Pay-information clearfix">
            <div className="pay-head">
              <ul className="clearfix">
                <li className="">
                  <span>项目</span>
                </li>
                <li className="w200">
                  <span>缴费基数</span>
                </li>
                <li className="w200">
                  <span>公司缴交比例</span>
                </li>
                <li className="w200">
                  <span>个人缴交比例</span>
                </li>
              </ul>
            </div>
            <div className="pay-body">
              <ul className="clearfix">
                <li className="">
                  <span>养老保险：</span>
                </li>
                <li className="w200">
                  <FormItem style={{width:'100%'}} >
                    {getFieldDecorator('yanglao1', {
                      initialValue: this.getInitValue('110','socialInsBase'),
                      rules: [{
                        required: this.state.checkNick, message: '养老保险缴费基数不能为空!',
                      }, {
                        validator: this.checkJiShu,
                      }],
                    })(
                      <Input style={{width: "150px"}} maxLength="9"/>
                    )}
                  </FormItem>
                </li>
                <li className="w200 bg-bai">
                  <FormItem
                    style={{width:'100%'}}
                  >
                    {getFieldDecorator('yanglao2', {
                      initialValue: this.getInitValue('110','comPayProp'),
                      rules: [{
                        required: this.state.checkNick, message: '养老保险公司缴费比例不能为空!',
                      }, {
                        validator: this.checkJiShuMore,
                      }],
                    })(
                      <Input style={{width: "150px"}} className="bai"/>
                    )}
                  </FormItem>
                </li>
                <li className="w200 bg-bai">
                  <FormItem
                    style={{width:'100%'}}
                  >
                    {getFieldDecorator('yanglao3', {
                      initialValue:this.getInitValue('110','perPayProp'),
                      rules: [{
                        required: this.state.checkNick, message: '养老保险个人缴费比例不能为空!',
                      }, {
                        validator: this.checkJiShuMore,
                      }],
                    })(
                      <Input style={{width: "150px"}} className="bai"/>
                    )}
                  </FormItem>
                </li>
              </ul>
              <ul className="clearfix">
                <li className="">
                  <span>医疗保险：</span>
                </li>
                <li className="w200">
                  <FormItem
                    style={{width:'100%'}}
                  >
                    {getFieldDecorator('yiliao1', {
                      initialValue:this.getInitValue('310','socialInsBase'),
                      rules: [{
                        required: this.state.checkNick, message: '医疗保险缴费基数不能为空!',
                      }, {
                        validator: this.checkJiShu,
                      }],
                    })(
                      <Input style={{width: "150px"}} maxLength="9"/>
                    )}
                  </FormItem>
                </li>
                <li className="w200 bg-bai">
                  <FormItem
                    style={{width:'100%'}}
                  >
                    {getFieldDecorator('yiliao2', {
                      initialValue:this.getInitValue('310','comPayProp'),
                      rules: [{
                        required: this.state.checkNick, message: '医疗保险公司缴费比例不能为空!',
                      }, {
                        validator: this.checkJiShuMore,
                      }],
                    })(
                      <Input style={{width: "150px"}} className="bai"/>
                    )}
                  </FormItem>
                </li>
                <li className="w200 bg-bai">
                  <FormItem
                    style={{width:'100%'}}
                  >
                    {getFieldDecorator('yiliao3', {
                      initialValue:this.getInitValue('310','perPayProp'),
                      rules: [{
                        required: this.state.checkNick, message: '医疗保险个人缴费比例不能为空!',
                      }, {
                        validator: this.checkJiShuMore,
                      }],
                    })(
                      <Input style={{width: "150px"}} className="bai"/>
                    )}
                  </FormItem>
                </li>
              </ul>
              <ul className="clearfix">
                <li className="">
                  <span>失业保险：</span>
                </li>
                <li className="w200">
                  <FormItem
                    style={{width:'100%'}}
                  >
                    {getFieldDecorator('shiye1', {
                      initialValue:this.getInitValue('210','socialInsBase'),
                      rules: [{
                        required: this.state.checkNick, message: '失业保险缴费基数不能为空!',
                      }, {
                        validator: this.checkJiShu,
                      }],
                    })(
                      <Input style={{width: "150px"}} maxLength="9"/>
                    )}
                  </FormItem>
                </li>
                <li className="w200 bg-bai">
                  <FormItem
                    style={{width:'100%'}}
                  >
                    {getFieldDecorator('shiye2', {
                      initialValue:this.getInitValue('210','comPayProp'),
                      rules: [{
                        required: this.state.checkNick, message: '失业保险公司缴费比例不能为空!',
                      }, {
                        validator: this.checkJiShuMore,
                      }],
                    })(
                      <Input style={{width: "150px"}} className="bai"/>
                    )}
                  </FormItem>
                </li>
                <li className="w200 bg-bai">
                  <FormItem
                    style={{width:'100%'}}
                  >
                    {getFieldDecorator('shiye3', {
                      initialValue:this.getInitValue('210','perPayProp'),
                      rules: [{
                        required: this.state.checkNick, message: '失业保险个人缴费比例不能为空!',
                      }, {
                        validator: this.checkJiShuMore,
                      }],
                    })(
                      <Input style={{width: "150px"}} className="bai"/>
                    )}
                  </FormItem>
                </li>
              </ul>
              <ul className="clearfix">
                <li className="">
                  <span>工伤保险：</span>
                </li>
                <li className="w200">
                  <FormItem
                    style={{width:'100%'}}
                  >
                    {getFieldDecorator('gongzuo1', {
                      initialValue:this.getInitValue('410','socialInsBase'),
                      rules: [{
                        required: this.state.checkNick, message: '工伤保险缴费基数不能为空!',
                      }, {
                        validator: this.checkJiShu,
                      }],
                    })(
                      <Input style={{width: "150px"}} maxLength="9"/>
                    )}
                  </FormItem>
                </li>
                <li className="w200 bg-bai">
                  <FormItem
                    style={{width:'100%'}}
                  >
                    {getFieldDecorator('gongzuo2', {
                      initialValue:this.getInitValue('410','comPayProp'),
                      rules: [{
                        required: this.state.checkNick, message: '工作保险公司缴费比例不能为空!',
                      }, {
                        validator: this.checkJiShuMore,
                      }],
                    })(
                      <Input style={{width: "150px"}} className="bai"/>
                    )}
                  </FormItem>
                </li>
                <li className="w200 bg-bai">
                  <FormItem
                    style={{width:'100%'}}
                  >
                    {getFieldDecorator('gongzuo3', {
                      initialValue:this.getInitValue('410','perPayProp'),
                      rules: [{
                        required: this.state.checkNick, message: '工作保险个人缴费比例不能为空!',
                      }, {
                        validator: this.checkJiShuMore,
                      }],
                    })(
                      <Input style={{width: "150px"}} className="bai"/>
                    )}
                  </FormItem>
                </li>
              </ul>
              <ul className="clearfix">
                <li className="">
                  <span>生育保险：</span>
                </li>
                <li className="w200">
                  <FormItem
                    style={{width:'100%'}}
                  >
                    {getFieldDecorator('shengyu1', {
                      initialValue:this.getInitValue('510','socialInsBase'),
                      rules: [{
                        required: this.state.checkNick, message: '生育保险缴费基数不能为空!',
                      }, {
                        validator: this.checkJiShu,
                      }],
                    })(
                      <Input style={{width: "150px"}} maxLength="9"/>
                    )}
                  </FormItem>
                </li>
                <li className="w200 bg-bai">
                  <FormItem
                    style={{width:'100%'}}
                  >
                    {getFieldDecorator('shengyu2', {
                      // initialValue:this.getInitValue('410','comPayProp'),
                      initialValue:this.getInitValue('510','comPayProp'),
                      rules: [{
                        required: this.state.checkNick, message: '生育保险公司缴费比例不能为空!',
                      }, {
                        validator: this.checkJiShuMore,
                      }],
                    })(
                      <Input style={{width: "150px"}} className="bai"/>
                    )}
                  </FormItem>
                </li>
                <li className="w200 bg-bai">
                  <FormItem
                    style={{width:'100%'}}
                  >
                    {getFieldDecorator('shengyu3', {
                      // initialValue:this.state.schemeDetail[4].perPayProp,
                      initialValue:this.getInitValue('510','perPayProp'),
                      rules: [{
                        required: this.state.checkNick, message: '生育保险个人缴费比例不能为空!',
                      }, {
                        validator: this.checkJiShuMore,
                      }],
                    })(
                      <Input style={{width: "150px"}} className="bai"/>
                    )}
                  </FormItem>
                </li>
              </ul>
            </div>
          </div>
          {this.state.schemeId === '00' ? <div>
              {this.state.intercalate === true ? <FormItem
                label=" "
                colon={false}
              >
                <Button style={{ marginRight:'8px' }} onClick={this.cancelConfirm}>
                  返回
                </Button>
                <Button type="primary" htmlType="submit">
                  添加人员
                </Button>
              </FormItem> : ''}
          </div> : <div>
            <h2>缴交人员</h2>
            <div className="set-table" style={{ marginTop:'24px' }}>
              <div className="set-but" style={{ marginBottom:'24px' }}>
                <Button type="primary" style={{ marginRight:'8px' }}
                onClick={()=>{ this.setState({ visibleuser: true, userIdArrays:[]}); }}
                >+添加人员</Button>
                <Button type="danger" ghost onClick={this.handleDeleteList}>移除人员</Button>
              </div>
              {this.renderOrderList()}
            </div>
            <FormItem
              label=" "
              colon={false}
            >
              <Button style={{ marginRight:'8px' }} onClick={this.cancelConfirm}>
                返回
              </Button>
              <Button type="primary" htmlType="submit" loading={this.state.loading}>
                保存
              </Button>
            </FormItem>
          </div>}
        </Form>

         {/*添加人员弹窗*/}
         <Modal
              width={700}
              title="添加人员"
              maskClosable={false}
              visible={this.state.visibleuser}
              onOk={this.handleMessageOk}
              onCancel={this.handleMessageCancel}
            >
              <div>
                {/* <label style={{ display: "inline-block", width: '130px', textAlign: "right" }}>选择的人员列表：</label> */}
                <TreeSelect {...tProps} />
              </div>
              {/* <div style={{ position: 'relative' }}>
                <label style={{ display: "inline-block", width: '80px', textAlign: "right", marginTop: "26px" }}>标题：</label>
                <Input style={{ width: 560, paddingRight: "60px" }}
                  placeholder="请输入"
                  maxLength="20"
                  onChange={this.inputMessageName}
                  value={this.state.input_wed}
                />
                <span style={{ position: 'absolute', top: '28px', right: '20px', color: '#999', fontSize: '12px' }}>{this.state.titleLength}/20</span>
              </div>
              <div className="clearfix">
                <label style={{ display: "inline-block", width: '80px', textAlign: "right", marginTop: "26px", float: 'left' }}>内容：</label>
                <div className="Rich-text">
                  <LzEditor
                    uploadProps={uploadProps}
                    active
                    video={false}
                    audio={false}
                    image={false}
                    cbReceiver={this.receiveHtml}
                    importContent={stateDataSource.briefIntroduce}
                    key="LzEditor"
                  />
                </div>
              </div> */}
            </Modal>

        {/* {this.state.visibleuser && <PartmentButton
        onCheck={this.callbackSavePersons}
        value={this.state.checkedkeys}
        visible={this.state.visibleuser} />} */}
      </div>
    );
  }
}



